<template>
    <div class="main">
        <div class="form-container">
            <div  class="form-main">
                <h2>新型冠状病毒流调</h2>
                <p class="warn-content">为严防疫情扩散，进一步做好新型冠状病毒的肺炎疫情防控工作，请如实填写以下信息!</p>
                <span class="required" style="color:red">*</span> <label for="name">姓名</label><br/>

                <input class="form-border" id="name" type="text" name="username"  placeholder="姓名" required="required" v-model="nameModel"  /> <br/>
            
                <span class="required" style="color:red">*</span> <label for="gender" required>性别</label><br/>
                <div class="form-border form-twoBor">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input  type="radio" name="gender" value="1"   id="male" checked="checked" v-model="genderModel" /><label for="male"> 男</label>
                    </div>
                    <div>
                        <input type="radio" name="gender" value="2" id="female" v-model="genderModel" /><label for="female"> 女</label>
                    </div>
                </div>
                <span class="required" style="color:red">*</span> <label for="age">年龄</label><br/>
                <input class="form-border" id="age" type="text" name="username"  placeholder="年龄" required="required" v-model="ageModel" /> <br/>
                
                <span class="required" style="color:red">*</span> <label for="phone">联系电话</label><br/>
                <input class="form-border" id="phone" type="text" name="phoneNum"  required="required"  placeholder="联系电话" v-model="phoneModel" /><br/> 

                <label for="symptom">症状和体征</label><br/>
                <div class="form-border tizheng clearfix">
                    <div>
                        <input type="checkbox" name="symptom" value="发热" v-model="symptoModel"/> 发热
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="寒战" v-model="symptoModel"/> 寒战
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="咳嗽" v-model="symptoModel"/> 咳嗽
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="咳痰" v-model="symptoModel"/> 咳痰
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="头痛" v-model="symptoModel"/> 头痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="咽痛" v-model="symptoModel"/> 咽痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="鼻塞" v-model="symptoModel"/> 鼻塞
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="流涕" v-model="symptoModel"/> 流涕
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="肌肉酸痛" v-model="symptoModel"/> 肌肉酸痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="关节酸痛" v-model="symptoModel"/> 关节酸痛
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="乏力" v-model="symptoModel"/> 乏力
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="胸闷" v-model="symptoModel"/> 胸闷
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="气促" v-model="symptoModel"/> 气促
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="呼吸困难" v-model="symptoModel"/> 呼吸困难
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="腹泻" v-model="symptoModel"/> 腹泻
                    </div>
                    <div>
                        <input type="checkbox" name="symptom" value="结膜炎" v-model="symptoModel"/> 结膜炎
                    </div>
                </div>
                <span class="required" style="color:red">*</span> <label for="temperature">体温（最高体温℃）</label><br/>
                <input  class="form-border" id="temperature" type="text" name="temperature"  placeholder="最高体温" required="required" v-model="temperatureModel" /><br/>
            
                <span class="required" style="color:red">*</span> <label for="fever">发病前14天内，生活工作的场所是否有发热、咳嗽的病人？</label><br/>
                <div class="form-border form-twoBor">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input type="radio" name="have-patient" value="1"   id="feverYes" v-model="feverModel"/><label for="feverYes"> 是</label>
                    </div>
                    <div>
                        <input type="radio" name="have-patient" value="0" id="feverNo" checked="checked" v-model="feverModel"/><label for="feverNo"> 否</label> 
                    </div>
                </div>

                <span class="required" style="color:red">*</span> <label for="contact">发病前14天内是否接触过类似病例？</label><br/>
                <div class="form-border form-twoBor">
                    <div style="border-bottom: 1px solid rgba(255, 255, 255, 0.24);">
                        <input type="radio" name="contact-patient" value="1"   id="contactYes" v-model="contactModel" /><label for="contactYes"> 是</label>
                    </div>
                    <div>
                        <input type="radio" name="contact-patient" value="0"   id="contactNo" checked="checked" v-model="contactModel" /><label for="contactNo"> 否</label>
                    </div>
                </div>
            </div>
            <button class="form-submit" type="submit" @click="submitClick">提交</button>
        </div>
        <confirm v-model="showconfirm"
             :title="confirmtitle"
             @on-cancel="onCancel"
             @on-confirm="onConfirm"
             @on-show="onShow"
             @on-hide="onHide">
        </confirm>
    </div>
</template>
<script>
import { questionnaireData } from '@/assets/js/service'
import { Confirm } from 'vux'

export default {
    components: {
        Confirm
    },
    data () {
        return {
            nameModel:'',
            genderModel:'1',
            ageModel:'',
            phoneModel:'',
            symptoModel:[],
            temperatureModel:'',
            feverModel:'1',
            contactModel:'1',

            showconfirm:false,
            confirmtitle:"是否继续填写"

        }
    },
    created () {

    },
    mounted: function () {

    },
    methods: {
        onCancel(){
            this.$router.push({path:"/home",query: {}});
        },
        onConfirm(){
            console.log("确认删除")
        },
        onShow(){
            console.log("显示")
        },
        onHide(){
            console.log("隐藏")
        },
        submitClick(){
            let _this = this;
            //  _this.showconfirm=true;
            if(_this.$verification(this.nameModel,0,"姓名")&&_this.$verification(this.ageModel,0,"年龄")&&_this.$verification(this.ageModel,2,"年龄")
                &&_this.$verification(this.phoneModel,0,"电话")&&_this.$verification(this.phoneModel,1,"电话")&&_this.$verification(this.temperatureModel,0,"体温")){
                    var param={
                        "name":this.nameModel,
                        "sex":this.genderModel,
                        "age":this.ageModel,
                        "phone":this.phoneModel,
                        "symptom":this.symptoModel.join(','),
                        "temp":this.temperatureModel,
                        "longitude":"35.212234567",
                        "latitude":"160.34234567",
                        "isPatient":this.feverModel,
                        "isContact":this.contactModel
                    };
                    console.log(param)
                    
                    questionnaireData(param,function(res){
                        console.log("返回正常questionnaireData",res)
                        if(res.state){
                            console.log("ddd"+res)
                            _this.showconfirm=true;
                        }else{
                            _this.$showBottomToast("请求数据异常！")
                        }
                    })
            }
            
            console.log(this.nameModel+'+'+this.genderModel+'+'+this.ageModel+'+'+this.phoneModel+'+'+this.symptoModel
            +'+'+this.temperatureModel+'+'+this.feverModel+'+'+this.contactModel)
        }
    }
}
</script>
<style lang="less" scoped>
.main{
    overflow: hidden;
    background: url("../../assets/images/home/bj.png") 0 0;
    background-size: 100% 100%;
    .form-container{
        background: url("../../assets/images/home/cont_bj.png") 0 0;
        background-size: 100% 100%;
        width: 94%;
        margin: 0 3%;
        padding: 0 6px;
        margin-bottom: 10px;
        padding-bottom: 25px;
        .form-main{
            width: 100%;
            margin-top: 130px;
            margin-bottom: 30px;
            padding: 0 20px;
            color: #fff;
            .warn-content{
                margin-top: 10px;
                margin-bottom: 18px;
                line-height: 30px;
                font-size: 15px;
            }
            h2{
                text-align: center;
                color: #fff;
                width: calc(100% + 40px);
                margin-left: -20px;
                border-bottom: 1px solid rgba(255, 255, 255, 0.24);
                height: 60px;
                line-height: 60px;
                font-size: 24px;
            }
            h4{
                margin-top: 15px;
            }
            .form-border{
                background-color: rgba(255, 255, 255, 0.9);
                color: #333333;
                padding:5px;
                margin: 5px 0;
                width: 100%;
                margin-bottom: 20px;
                border-radius: 3px;
            }
            .tizheng{
                div{
                    width: 33.3333%;
                    float: left;
                    padding: 10px 5px;
                    font-size: 15px;
                    input{
                        vertical-align: middle;
                        width: 15px;
                        height: 15px;
                    }
                }
            }
            .form-twoBor{
                padding: 5px 0;
                div{
                    width: 100%;
                    padding: 5px 10px;
                    input{
                        vertical-align: middle;
                        width: 20px;
                        height: 20px;
                    }
                    label{
                        font-size: 15px;
                    }
                }

            }
            
        }
        .form-submit{
            width: 90%;
            margin-left: 5%;
            height: 50px;
            background: #228ed9;
            border-radius: 8px;
            color: white;
            font-size: 15px;
            border: none;
            outline: none;
        }
    }
    
}
</style>